<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* ---- reset ---- */
		body {
		    margin: 0;
		    font: normal 75% Arial, Helvetica, sans-serif;
		}
		canvas {
		    display: block;
		    vertical-align: bottom;
		}
		/* ---- tsparticles container ---- */

		#tsparticles {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    background-color: #323031;
		    background-image: url("");
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50% 50%;
		}
		/* ---- stats.js ---- */

		.count-particles {
		    background: #000022;
		    position: absolute;
		    top: 48px;
		    left: 0;
		    width: 80px;
		    color: #13e8e9;
		    font-size: 0.8em;
		    text-align: left;
		    text-indent: 4px;
		    line-height: 14px;
		    padding-bottom: 2px;
		    font-family: Helvetica, Arial, sans-serif;
		    font-weight: bold;
		}
		.js-count-particles {
		    font-size: 1.1em;
		}
		#stats,
		.count-particles {
		    -webkit-user-select: none;
		}
		#stats {
		    border-radius: 3px 3px 0 0;
		    overflow: hidden;
		}
		.count-particles {
		    border-radius: 0 0 3px 3px;
		}
		.report-link-wrap {
			text-align: center;
			width: 100%;
			position: absolute;
			bottom: 100px;
		}
		.report-link-wrap a {
			color: #fff;
		    text-decoration: none;
		}
	</style>
</head>
<body>
	<div id="tsparticles"></div>
	<div class="report-link-wrap">
		<a href="http://beian.miit.gov.cn">晋ICP备16011583号</a>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.9.2/dist/tsparticles.min.js"></script>
	<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
	<script>
		tsParticles.load("tsparticles", {
		    detectRetina: false,
		    fpsLimit: 60,
		    interactivity: {
		        detectsOn: "canvas",
		        events: {
		            onClick: {
		                enable: false,
		                mode: "push"
		            },
		            onDiv: {
		                elementId: "repulse-div",
		                enable: false,
		                mode: "repulse"
		            },
		            onHover: {
		                enable: true,
		                mode: "bubble",
		                parallax: {
		                    enable: false,
		                    force: 2,
		                    smooth: 10
		                }
		            },
		            resize: true
		        },
		        modes: {
		            bubble: {
		                distance: 40,
		                duration: 2,
		                opacity: 8,
		                size: 6,
		                speed: 3
		            },
		            connect: {
		                distance: 80,
		                lineLinked: {
		                    opacity: 0.5
		                },
		                radius: 60
		            },
		            grab: {
		                distance: 400,
		                lineLinked: {
		                    opacity: 1
		                }
		            },
		            push: {
		                quantity: 4
		            },
		            remove: {
		                quantity: 2
		            },
		            repulse: {
		                distance: 200,
		                duration: 0.4
		            },
		            slow: {
		                active: false,
		                radius: 0,
		                factor: 1
		            }
		        }
		    },
		    particles: {
		        color: {
		            value: "#ffffff"
		        },
		        lineLinked: {
		            blink: false,
		            color: "#ffffff",
		            consent: false,
		            distance: 30,
		            enable: true,
		            opacity: 0.4,
		            width: 1
		        },
		        move: {
		            attract: {
		                enable: false,
		                rotate: {
		                    x: 600,
		                    y: 1200
		                }
		            },
		            bounce: false,
		            direction: "none",
		            enable: true,
		            outMode: "bounce",
		            random: false,
		            speed: 1,
		            straight: false
		        },
		        number: {
		            density: {
		                enable: false,
		                area: 2000
		            },
		            limit: 0,
		            value: 200
		        },
		        opacity: {
		            animation: {
		                enable: true,
		                minimumValue: 0.05,
		                speed: 2,
		                sync: false
		            },
		            random: false,
		            value: 0.4
		        },
		        shape: {
		            character: {
		                fill: false,
		                font: "Verdana",
		                style: "",
		                value: "*",
		                weight: "400"
		            },
		            image: {
		                height: 100,
		                replaceColor: true,
		                src: "images/github.svg",
		                width: 100
		            },
		            polygon: {
		                sides: 5
		            },
		            stroke: {
		                color: "#000000",
		                width: 0
		            },
		            type: "circle"
		        },
		        size: {
		            animation: {
		                enable: false,
		                minimumValue: 0.1,
		                speed: 40,
		                sync: false
		            },
		            random: true,
		            value: 3
		        }
		    },
		    polygon: {
		        draw: {
		            enable: true,
		            lineColor: "rgba(255,255,255,0.2)",
		            lineWidth: 0.5
		        },
		        move: {
		            radius: 10
		        },
		        inlineArrangement: "equidistant",
		        scale: 0.5,
		        type: "inline",
		        url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg"
		    }
		});
		
	</script>
</body>
</html>